<template>
  <div class="page">
    <div class="dd">
      <div v-for="i in data" class="fz" @click="active = i.id">
        {{ i.name }}
      </div>
    </div>
    <div class="aa">
      <template v-for="i in data" >
        <template v-if="i.id === active">
          <div v-for="(item, j) in i.children">
            <a-card :title="item.name">
              <p>状态： <a-tag v-if="j % 2 === 1" color="processing">在线</a-tag><a-tag v-if="j % 2 === 0" color="error">不在线</a-tag></p>
              <p>状态：</p>
              <p>状态：</p>
            </a-card>
          </div>
        </template>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: '001',
      data: [
        {
          name: '分组1',
          id: '001',
          children: [
            { name: '电脑1', id: '00101' },
            { name: '电脑2', id: '00102' },
            { name: '电脑3', id: '00103' },
            { name: '电脑4', id: '00104' }
          ]
        },
        {
          name: '分组2',
          id: '002',
          children: [
            { name: '电脑a', id: '00201' },
            { name: '电脑b', id: '00202' },
            { name: '电脑c', id: '00203' },
          ]
        },
        {
          name: '分组3',
          id: '003',
          children: [
            { name: '电脑e', id: '00301' },
            { name: '电脑f', id: '00302' },
            { name: '电脑g', id: '00303' },
          ]
        }
      ]
    };
  }
}
</script>

<style scoped>
.page {
  display: grid;
  height: 100vh;
  grid-template-columns: 280px 1fr;
}
.dd {
  padding: 20px;
  background-color: #edf2fa;
}
.dd .fz {
  margin-bottom: 20px;
  text-align: right;
  cursor: pointer;
}
.aa {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-template-rows: max-content;
  grid-gap: 20px;
}
</style>